<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="室内机" name="first">
        <inner-mac :workLineType="0"></inner-mac>
      </el-tab-pane>
      <el-tab-pane label="室外机" name="second">
        <inner-mac :workLineType="1"></inner-mac>
      </el-tab-pane>
      <el-tab-pane label="热交换区" name="third">
        <hot-react :workLineType="2"></hot-react>
      </el-tab-pane>
      <el-tab-pane label="图形切换" name="fourth">
        <graph-view :data="activeName" :workLineType="2"></graph-view>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  import innerMac from './innerMac';
  import hotReact from './hotReact';
  import graphView from './graphView';

  export default {
    name: 'mainHeadPage',
    data() {
      return {
        activeName: 'first'
      }
    },
    components:{
      innerMac,
      hotReact,
      graphView
    },
    methods: {
      handleClick(tab, event) {
        
      },
    }
  }
</script>
<style>
  .el-table td, .el-table th.is-leaf{
    background: #F2F2F2;
    text-align: center;
    border-bottom: 1px solid #ffffff;
  }

  .el-table td{
    cursor: pointer;
  }

  .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
    border-right: 1px solid #ffffff;
  }
  .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: auto;
  }
  .el-table--border, .el-table--group {
    border: 1px solid #ffff;
  }
  .el-table thead.is-group th {
    text-align: center;
  }

  .app-container {
    overflow-y: hidden;
  }
</style>
